<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生js封装拖拽对象</title>
</head>
<style>
    div {
        height: 300px;
        width: 300px;
        background-color: coral;
    }
</style>
<body>

    <div id="target1"></div>
    <div id="target2"></div>

</body>
<script>
    (function () {

        const transform = getTransform()

        function Drag(selector) {
            this.elem = document.querySelector(selector)

            this.mouseStartX = 0
            this.mouseStartY = 0
            this.sourceX = 0
            this.sourceY = 0

            this.init()
        }

        //将公共方法都放到原型对象上
        Drag.prototype = {
            constructor: Drag,

            init: function () {
                this.setDrag()
            },

            //获取style方法
            getStyle: function (elem, property) {
                return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(elem, false)[property] : elem.currentStyle[property]
            },

            //获取position值
            getPosition: function () {
                let pos = {
                    x: 0,
                    y: 0
                }
                if(transform) {
                    const transformVal = this.getStyle(this.elem, transform)
                    if(transformVal === 'none') {
                        this.elem.style[transform] = 'translate(0, 0)'
                        return pos
                    } else {
                        const temp = transformVal.match(/-?\d+/g);
                        return pos = {
                            x: parseInt(temp[4].trim()),
                            y: parseInt(temp[5].trim())
                        }
                    }
                } else {
                    const position = this.getStyle(this.elem, 'position')
                    if(position === 'static') {
                        this.elem.style['position'] = 'relative'
                        return pos
                    } else {
                        return pos = {
                            x: parseInt(this.getStyle(this.elem, 'left')),
                            y: parseInt(this.getStyle(this.elem, 'top'))
                        }
                    }
                }
            },

            //设置position值
            setPosition: function (pos) {
                if(transform) {
                    this.elem.style[transform] = `translate(${ pos.x }px, ${ pos.y }px)`
                } else {
                    this.elem.style['left'] = pos.x + 'px'
                    this.elem.style['top'] = pos.y + 'px'
                }
            },

            //用于绑定事件的方法
            setDrag: function () {

                //！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
                //定义self存储 Drag，因为后面start中的this是 selector，move和end的this是document
                //！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
                const self = this
                this.elem.addEventListener('mousedown', start, false)

                function start(e) {
                    console.log(this, self)

                    self.mouseStartX = e.pageX
                    self.mouseStartY = e.pageY

                    const pos = self.getPosition()
                    self.sourceX = pos.x
                    self.sourceY = pos.y

                    document.addEventListener('mousemove', move, false)
                    document.addEventListener('mouseup', end, false)
                }

                function move(e) {
                    const distanceX = e.pageX - self.mouseStartX, distanceY = e.pageY - self.mouseStartY

                    self.setPosition({
                        x: self.sourceX + distanceX, y: self.sourceY + distanceY
                    })
                }

                function end(e) {
                    document.removeEventListener('mousemove', move)
                    document.removeEventListener('mouseup', end)
                }
            }
        }

        function getTransform() {
            const transformArr = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform']

            //新创建一个div来找transform属性
            const divStyle = document.createElement('div').style

            for(let i of transformArr) {
                if(i in divStyle) {
                    return i
                }
            }
            console.log(1)
            return ''
        }

        window.Drag = Drag
    })()

    const t1 = new Drag('#target1')
    const t2 = new Drag('#target2')
</script>
</html>